<template>
  <div>
      <p id="container">
          <!-- <p class='pdf-page'> -->
            <canvas id="the-canvas"></canvas></p>
            <p class="foot" v-if="pdfDoc">
              <button class="left" click="onPrevPage" v-if="pageNum>1">上一页</button>
              <button class="right" click="onNextPage" v-if="pageNum<pdfDoc.numPages">下一页</button></p>
          <!-- </p> --><p></p>
  </div>
  
    </template>
    <script>
    import PDFJS from 'pdfjs-dist'
     
    export default {
      data () {
        return {
          pdfDoc: null,
          pageNum: 1,
          pageRendering: false,
          pageNumPending: null,
          scale: 0.9
        }
      },
      methods: {
        showPDF (url) {
          let _this = this
          PDFJS.getDocument(url).then(function (pdf) {
           
            // t.totalPage = pdf.numPages;
            _this.pdfDoc = pdf;
            console.log(_this.pdfDoc)
            _this.renderPage(1)
          })
        },
        renderPage (num) {
          this.pageRendering = true
          let _this = this
          this.pdfDoc.getPage(num).then(function (page) {
            console.log("你好："+num)
            var viewport = page.getViewport(_this.scale)
            let canvas = document.getElementById('the-canvas')
            canvas.height = viewport.height
            canvas.width = viewport.width
     
            // Render PDF page into canvas context
            var renderContext = {
              canvasContext: canvas.getContext('2d'),
              viewport: viewport
            }
            var renderTask = page.render(renderContext)
     
            // Wait for rendering to finish
            renderTask.promise.then(function () {
              _this.pageRendering = false
              if (_this.pageNumPending !== null) {
                // New page rendering is pending
                this.renderPage(_this.pageNumPending)
                _this.pageNumPending = null
              }
            })
          })
        },
        queueRenderPage (num) {
          if (this.pageRendering) {
            this.pageNumPending = num
          } else {
            this.renderPage(num)
          }
        },
        onPrevPage () {
          if (this.pageNum <= 1) {
            return
          }
          this.pageNum--
          this.queueRenderPage(this.pageNum)
        },
        onNextPage () {
          console.log(111)
          if (this.pageNum >= this.pdfDoc.numPages) {
            return
          }
          this.pageNum++
          this.queueRenderPage(this.pageNum)
        }
      }
    }
    </script><style scoped="" type="text/css">#container {
      background-color: rgba(0,0,0,0.75);
      position:fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      text-align: center;
      /* padding: 5px; */
    }
     
    .pdf-page {
     
    }
     
    .foot {
      position: fixed;
      transform: translate(-50%,0);
      left: 50%;
    }</style>